<template>
  <div class="empty-state">
    <a-empty :description="description">
      <template #image>
        <div class="empty-icon">{{ icon }}</div>
      </template>
      <template #description>
        <div>
          <h3>{{ title }}</h3>
          <p>{{ subtitle }}</p>
        </div>
      </template>
    </a-empty>
  </div>
</template>

<script setup lang="ts">
  import { Empty as AEmpty } from 'ant-design-vue';

  interface Props {
    icon?: string;
    title?: string;
    subtitle?: string;
    description?: string;
  }

  withDefaults(defineProps<Props>(), {
    icon: '📭',
    title: '暂无数据',
    subtitle: '这里暂时没有内容',
    description: '暂无数据',
  });
</script>

<style scoped lang="scss">
  @use '../css/blog.scss' as *;
</style>
